import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },

    // 组合式api
    {
      path: '/composition/NormalLife',
      name: 'NormalLife',
      component: () => import('../views/composition1/NormalLife.vue')
    },
    {
      path: '/composition/lifecircle',
      name: 'lifecircle',
      component: () => import('../views/composition1/LifeCircle.vue')
    },

    // 数据流向
    {
      path: '/transport/father',
      name: 'father',
      component: () => import('../views/transport/FatherView.vue')
    },
    {
      path: '/transport/grandpa',
      name: 'grandpa',
      component: () => import('../views/transport2/GrandpaView.vue')
    },
    {
      path: '/transport/grandpaB',
      name: 'grandpaB',
      component: () => import('../views/transport3/GrandpaView.vue')
    },
    {
      path: '/transport4',
      name: 'Transport4',
      component: () => import('../views/transport4/index.vue')
    },

    // 脚手架、vite

    {
      path: '/bootstrap/vite',
      name: 'vite',
      component: () => import('../views/transport3/GrandpaView.vue')
    },

    // liveHooks
    {
      path: '/todo',
      name: 'todo',
      component: () => import('../views/todo/index.vue')
    }
  ]
})

export default router
